import React,{useEffect, useState} from "react";
import ProForm, {ModalForm, ProFormSelect, ProFormText, ProFormTextArea} from "@ant-design/pro-form";
import {message, Select} from "antd";
import {addArticle, getArticleClassify} from "@/services/ant-design-pro/article";
import  UploadList  from '../components/UploadList'
import Radio from "@ant-design/pro-form/lib/components/Radio";

const AddModal = (props) => {
  const [value, setValue] = useState(1)
  const {isShow, setIsShow,actionRef} = props;
  const [classList,setClassList] = useState([])
  const { Option } = Select;

  // 改变显示和不显示
  const onChange = e => {
    setValue(e.target.value);
  };

  // 请求文章分类的列表
  useEffect(async ()=>{
    const classify = await getArticleClassify();
    console.log(classify);
    setClassList(classify)
  },[])

  return (
    <div>
      <ModalForm
        title="添加文章"
        visible={isShow}
        onVisibleChange={setIsShow}
        onFinish={async (values) => {
          console.log(values);
          await addArticle({...values})
          setIsShow(false)
          message.success('提交成功');
          actionRef.current?.reload()
        }}

      >
        <ProForm.Group
          title="文章信息"
        >
          <ProFormText
            width="md"
            name="title"
            label="标题"
            placeholder="请输入标题"
            rules={[{required: true, message: '请输入标题！'}]}
          />
          <ProFormSelect
            name="product_name"
            label="文章分类"
            width="md"
            request={async () => {
                return await getArticleClassify().data.map(item=>{
                  return { label: item.title, value: item.id }
                })
              }
            }
            placeholder="请选择文章分类！"
            rules={[{ required: true, message: '请选择文章分类!' }]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText width="md" name="contract" label="作者" placeholder="请输入作者名称" />
          <ProFormTextArea  width="md" name="introduce" label="文章简介" placeholder="请输入文章简介" />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            width="md"
            name="contract"
            label="图文封面"
            placeholder="请输入图文封面"
          >
            <UploadList />
          </ProFormText>
        </ProForm.Group>
        <ProForm.Group
          title='文章内容'
        >
        </ProForm.Group>
        <ProForm.Group
          title='其他设置'
        >
        </ProForm.Group>
        <ProForm.Item>
          <span>banner显示： </span>
          <Radio.Group onChange={onChange} value={value}>
            <Radio value={1}>显示</Radio>
            <Radio value={2}>不显示</Radio>
          </Radio.Group>
        </ProForm.Item>
        <ProForm.Item>
          <span>热门文章： </span>
          <Radio.Group onChange={()=>{}} value={value}>
            <Radio value={3}>显示</Radio>
            <Radio value={4}>不显示</Radio>
          </Radio.Group>
        </ProForm.Item>
      </ModalForm>
    </div>
  );
};

export default AddModal;
